<template>
  <div class="statusPie" ref="statusPie"></div>
</template>

<script lang="ts">
export default {
  name: "statusPie"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onMounted, nextTick, ref } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";

import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

import { reportStatus } from "/@/api/analysis";
import { storageLocal } from "/@/utils/storage";

const statusPie = ref<HTMLElement | null>(null) as any;

let echartInstance: ECharts;

function initechartInstance(seriesData) {
  const echartDom = document.querySelector(".statusPie");
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  echartInstance.setOption({
    // title: {
    //   text: "",
    //   left: "center",
    //   textStyle: {
    //     fontSize: 16,
    //     fontWeight: "normal",
    //     padding: 10
    //   }
    // },
    color: ["#00E1B4", "#FF5F5F", "#FFD199"],
    tooltip: {
      trigger: "item",
      formatter: "{b}： {c}（{d}%）"
    },
    // series: seriesData
    series: [
      {
        type: "pie",
        radius: ["56%", "69%"],
        // minAngle: 20,
        // minShowLabelAngle: 10,
        percentPrecision: 1,
        data: seriesData,
        // emphasis: {
        //   itemStyle: {
        //     shadowBlur: 10,
        //     shadowOffsetX: 0,
        //     shadowColor: "rgba(0, 0, 0, 0.5)"
        //   }
        // },
        label: {
          show: true,
          lineHeight: 15,
          formatter: "{b}\n {c}({d}%)"
        }
      }
    ]
  });
}

const getData = async () => {
  try {
    let sectionId = storageLocal.getItem("sectionInfo")?.id;
    let projectManageId = storageLocal.getItem("projectInfo")?.id;
    const { code, data } = await reportStatus({
      sectionId,
      projectManageId
    });
    if (code === 200) {
      let seriesData = [
        { value: data?.completeTotal, name: "已完成" },
        { value: data?.noStartTotal, name: "未启动" },
        { value: data?.doingTotal, name: "处理中" }
      ];
      nextTick(() => {
        initechartInstance(seriesData);
      });
    }
  } catch (err) {
    console.log(err);
  }
};

getData();

onMounted(() => {
  nextTick(() => {
    addResizeListener(statusPie.value, resetRender);
  });
  // useEventListener("resize", () => {
  //   console.log("resize");
  //   if (!echartInstance) return;
  //   useTimeoutFn(() => {
  //     echartInstance.resize();
  //   }, 180);
  // });
});

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(statusPie.value, resetRender);
});
</script>

<style lang="scss" scoped>
.statusPie {
  width: 100%;
  height: 100%;
}
</style>
